其他
【每日一练】87—Bootstrap实现一款简洁时尚的价格表效果
写在前面
Bootstrap是一个前端UI框架工具，用它，我们可以开发出比较友好的响应式网站，也可以提升我们的开发效率，它的中文网址：https://www.bootcss.com/
而我们今天这个练习，就是利用bootstrap来完成。
它是一个价格表单样式的效果，这种价格表格，也是我们在实际开发中经常用到的一种功能需求，而我们利用bootstrap来实现，可以提升我们的开发效率，对于一些独立开发者来讲，不需要设计师，一样也可以开发出好看的web项目。
而今天我们只是利用它来实现一个简单的价格表UI样式效果，具体效果如下：
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【每日一练】87—Bootstrap实现一款简洁时尚的价格表效果</title> <!--bootstrap 文件引入--> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /></head><body> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <h3 class="title">月度</h3> <div class="price-value"> <span class="month">30天</span> <span class="amount"> <span class="currency">￥ </span> 39 <span class="value">99</span> </span> </div> <ul class="pricing-content"> <li>logo设计</li> <li>icon设计</li> <li>banner设计</li> <li>DM设计</li> <li>名片设计</li> <li>以上设计均可</li> </ul> <a href="http://www.webqdkf.com" class="pricingTable-signup" target="_blank">立即订阅</a> </div> </div>
<div class="col-md-4 col-sm-6"> <div class="pricingTable"> <h3 class="title">季度</h3> <div class="price-value"> <span class="month">90天</span> <span class="amount"> <span class="currency">￥ </span> 99 <span class="value">99</span> </span> </div> <ul class="pricing-content"> <li>logo设计</li> <li>icon设计</li> <li>banner设计</li> <li>DM设计</li> <li>名片设计</li> <li>以上设计均可</li> </ul> <a href="http://www.webqdkf.com" class="pricingTable-signup" target="_blank">立即订阅</a> </div> </div>
<div class="col-md-4 col-sm-6"> <div class="pricingTable"> <h3 class="title">年度</h3> <div class="price-value"> <span class="month">365天</span> <span class="amount"> <span class="currency">￥ </span> 999 <span class="value">99</span> </span> </div> <ul class="pricing-content"> <li>logo设计</li> <li>icon设计</li> <li>banner设计</li> <li>DM设计</li> <li>名片设计</li> <li>以上设计均可</li> </ul> <a href="http://www.webqdkf.com" class="pricingTable-signup" target="_blank">立即订阅</a> </div> </div> </div> </div> </div> </body></html>body, html {padding: 0; margin: 0;}body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", "Helvetica", "Arial","sans-serif";}a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}a:hover,a:focus{color:#74777b;text-decoration: none;}*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.clearfix:after { content: " "; display: table;}.clearfix:after { clear: both;}.demo{ background: #ecedef; padding: 1.5em 0;}.pricingTable{ text-align: center; background: #fff; padding: 30px 0;}.pricingTable .title{ font-size: 22px; font-weight: 600; color: #2e282a; text-transform: uppercase; margin: 0 0 30px 0;}.pricingTable .price-value{ padding: 30px 0; background: #00a6bc; margin-bottom: 30px; position: relative;}.pricingTable .price-value:before{ content: ""; border-top: 15px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; position: absolute; top: 0; left: 46%;}.pricingTable .month{ display: block; font-size: 15px; font-weight: 900; color: #fff; text-transform: uppercase;}.pricingTable .amount{ display: inline-block; font-size: 50px; color: #fff; position: relative;}.pricingTable .currency{ position: absolute; top: -1px; left: -50px;}.pricingTable .value{ font-size: 20px; position: absolute; top: 21px; right: -27px;}.pricingTable .pricing-content{ padding: 0; margin: 0 0 30px 0; list-style: none;}.pricingTable .pricing-content li{ font-size: 16px; color: #868686; line-height: 35px;}.pricingTable .pricingTable-signup{ display: inline-block; padding: 8px 40px; background: #00a6bc; font-size: 15px; font-weight: 600; color: #fff; text-transform: capitalize; border: 2px solid #00a6bc; border-radius: 30px; transition: all 0.5s ease 0s;}.pricingTable .pricingTable-signup:hover{ background: #fff; color: #00a6bc;}@media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; }}写在最后
以上就是我们今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号